<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>放箱管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-form-model ref="form" :model="form" layout="inline">
        <a-form-model-item label="付款单位" prop="payableCustNameLike">
          <a-input v-model="form.payableCustNameLike" />
        </a-form-model-item>
        <a-form-model-item label="对账单编号" prop="billCodeLike">
          <a-input v-model="form.billCodeLike" />
        </a-form-model-item>
        <a-form-model-item label="对账日期">
          <a-range-picker @change="onChange">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-model-item>
        <a-form-model-item label="所属部门" prop="deptId">
          <a-tree-select
            class="selectInputWidth"
            v-model="form.deptId"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :load-data="onLoadData"
            :tree-data="deptTreeData"
            placeholder="请选择"
            @change="onChangeTree"
          ></a-tree-select>
        </a-form-model-item>
        <a-form-model-item label="所属销售" prop="sellerId">
          <a-select v-model="form.sellerId" class="selectInputWidth">
            <a-select-option value>请选择</a-select-option>
            <a-select-option v-for="v in sellers" :key="v.uiId">{{v.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="check">查询</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <a-spin :spinning="spinning">
      <a-row class="orderItem ordertem_de" v-if="listData.length > 0">
        <a-col :span="24">
          <div v-for="(v, index) in listData" :key="index" class="orderList">
            <a-card size="small">
              <template slot="title">
                <a-descriptions :column="3" class="titleCard" style="padding:0 20px;">
                  <a-descriptions-item label="对账单编号">{{v.billCode}}</a-descriptions-item>
                  <a-descriptions-item label="付款单位">
                    <a-tooltip placement="top" style="cursor:pointer">
                      <template slot="title">
                        <span>{{v.payableCustName}}</span>
                      </template>
                      {{v.payableCustName}}
                    </a-tooltip>
                  </a-descriptions-item>
                  <a-descriptions-item label="所属销售">{{v.seller}}</a-descriptions-item>
                </a-descriptions>
              </template>
              <a-descriptions :column="4" size="small" class="order_detl">
                <a-descriptions-item label="应收总金额">
                  <span class="t_money_fh">¥</span>
                  <span class="t_money">{{v.totalAmount.toFixed(2)}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="已收总金额">
                  <span class="t_money_fh">¥</span>
                  <span class="t_money">{{v.alreadyAmount.toFixed(2)}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="对账日期">{{v.createTime}}</a-descriptions-item>
                <a-descriptions-item label="截止日期">
                  <span style="color:red">{{v.endDate}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="开票总金额">
                  <span class="t_money_fh">¥</span>
                  <span class="t_money">{{v.invoiceAmount.toFixed(2)}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="未收总金额">
                  <span class="t_money_fh">¥</span>
                  <span class="t_money">{{v.remainingAmount.toFixed(2)}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="开票日期">{{v.lastInvoiceDate}}</a-descriptions-item>
                <a-descriptions-item label="结束日期">
                  <template>
                    <span v-if="v.completeTime" style="color:red">{{v.completeTime}}</span>
                    <span v-else>--</span>
                  </template>
                </a-descriptions-item>
              </a-descriptions>
            </a-card>
            <div class="pack_padd">
              <a-card size="small">
                <div class="pack_czuo">
                  <span>共{{v.containerQuantity}}个集装箱</span>
                  <a-button
                    type="primary"
                    ghost
                    @click.stop="putContainer(v)"
                    style="float:right;"
                  >选择放箱</a-button>
                </div>
              </a-card>
            </div>
          </div>
          <p class="orderPagination">
            <a-pagination
              show-size-changer
              :current="pagination.current"
              :total="pagination.total"
              :showTotal="pagination.showTotal"
              @showSizeChange="pagination.onShowSizeChange"
              @change="pagination.onChange"
            />
          </p>
        </a-col>
      </a-row>
      <a-empty v-else />
    </a-spin>
  </div>
</template>
<script>
import { queryReleaseContainerList } from '@/api/orderCenter'
import { querySellerDown, queryDeptDown } from '@/api'
const deptData = {
  type: 2, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_SELL'
}
const sellerData = {
  type: 2, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_SELL',
  status: 1
}
export default {
  data () {
    return {
      spinning: false,
      pageNum: 1,
      pageSize: 10,
      form: {
        deptId: '',
        sellerId: '',
        payableCustNameLike: '',
        billCodeLike: '',
        startDate: '',
        endDate: ''
      },
      listData: [],
      pagination: {},
      deptTreeData: [],
      sellers: [],
      btnControl: {}
    }
  },
  methods: {
    containerListRequest (e) {
      this.spinning = true
      queryReleaseContainerList(e)
        .then(res => {
          // // console.log(res.data)
          let list = res.data.list
          this.listData = list
          this.pagination = this.getPagination(res.data)
          // let { pageNum, pageSize, total, pages } = res.data
          // this.pagination = { pageNum, pageSize, total, pages }
          setTimeout(() => {
            this.spinning = false
          }, 300)
        })
        .catch(rs => {})
    },
    onChange (date, dateString) {
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    },
    check () {
      this.handleSubmit()
    },
    onShowSizeChange (current, size) {
      this.pageNum = current
      this.pageSize = size
      this.handleSubmit()
    },
    paginationOnChange (pageNum) {
      this.pageNum = pageNum
      this.handleSubmit()
    },
    handleSubmit () {
      this.containerListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    putContainer (e) {
      // // console.log(e)
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.$router.push({ path: `/orderCenter/pack/detail/${e.id}` })
    },
    onLoadData (treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children && treeNode.dataRef.children.length > 0) {
          resolve()
          return
        }
        queryDeptDown({ parentId: treeNode.dataRef.key, ...deptData }).then(
          rsp => {
            let childrenData = []
            rsp.data.forEach(value => {
              childrenData.push({
                title: value.name,
                key: value.deptId,
                value: value.deptId
              })
            })
            treeNode.dataRef.children = childrenData
            this.deptTreeData = [...this.deptTreeData]
            resolve()
          }
        )
      })
    },
    initDept (e) {
      queryDeptDown(e).then(rsp => {
        let initData = []
        rsp.data.forEach((value, index) => {
          initData.push({
            title: value.name,
            key: value.deptId,
            value: value.deptId
          })
        })
        this.deptTreeData = initData
      })
    },
    onChangeTree (value) {
      this.initSellerDown(value)
    },
    initSellerDown (deptId) {
      querySellerDown({ ...sellerData, deptId }).then(rsp => {
        this.sellers = rsp.data.map((v, i) => {
          if (!v.uiId) {
            v.name = '请选择'
            v.uiId = ''
          }
          return v
        })
      })
    },
    getPagination (data) {
      const pages = data ? data.pages : 0
      return {
        current: this.pageNum,
        pageSize: this.pageSize,
        total: data ? data.total : 0,
        showTotal: total => `共${total}条记录 第${this.pageNum}/${pages}页`,
        onChange: pageNum => {
          this.pageNum = pageNum
          this.handleSubmit()
        },
        onShowSizeChange: (current, size) => {
          this.pageNum = current
          this.pageSize = size
          this.handleSubmit()
        }
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // // console.log(this.$root._bc)
    })
    this.pagination = this.getPagination()
    // 所属部门
    this.initDept(deptData)
    // 所属销售
    this.initSellerDown()
    this.containerListRequest({
      ...this.form,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
  }
}
</script>

<style lang="less" scoped>
</style>
